<template>
  <div class="jiaojuan-page">
    <!-- 顶部导航栏 -->
     <BaseHeader
      :navs="navs"
      :activeNav="activeNav"
      @nav-change="activeNav = $event"
    />
    <div class="bg_top"></div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>题库</el-breadcrumb-item>
      <el-breadcrumb-item>CAAC</el-breadcrumb-item>
      <el-breadcrumb-item>题单管理</el-breadcrumb-item>
      <el-breadcrumb-item class="last">查看答卷</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 成绩统计卡片 -->
    <el-card class="score-card" :class="{ 'score-card-hover': isHovered }" @mouseenter="isHovered = true" @mouseleave="isHovered = false">
      <div class="score-main">
        <div class="score-value">{{ totalScore }}</div>
        <div class="score-label">得分</div>
      </div>
      <div class="score-stats">
        <div>
          <div class="stat-value">{{ correct.length }}</div>
          <div class="stat-label">正确题数</div>
        </div>
        <div>
          <div class="stat-value">{{ wrong.length }}</div>
          <div class="stat-label">错误题数</div>
        </div>
        <div>
          <div class="stat-value">{{ undone.length }}</div>
          <div class="stat-label">未做题数</div>
        </div>
      </div>
      <div class="score-questions">
        <div 
          v-for="n in 13" 
          :key="n" 
          :class="['question-dot', getDotClass(n)]"
          @click="scrollToQuestion(n)"
          :title="getQuestionStatus(n)"
        >{{ n }}</div>
      </div>
      <div class="score-filter">
        <el-radio-group v-model="filterType" size="small" @change="filterQuestions">
          <el-radio label="正确" border>正确</el-radio>
          <el-radio label="错误" border>错误</el-radio>
          <el-radio label="未做" border>未做</el-radio>
        </el-radio-group>
      </div>
    </el-card>

    <!-- 题目列表 -->
    <div class="questions-container">
      <div v-for="n in 13" :key="n" :id="`question-${n}`" class="question-item" :class="{ 'hidden': !isQuestionVisible(n) }">
        <div class="question-header">
          <span class="question-number">第{{ n }}题</span>
          <span :class="['question-status', getStatusClass(n)]">{{ getQuestionStatus(n) }}</span>
        </div>
        <div class="question-content">
          <p>题目内容示例 {{ n }}</p>
          <div class="answer-section">
            <p>你的答案：{{ getAnswer(n) }}</p>
            <p v-if="wrong.includes(n)" class="correct-answer">正确答案：{{ getCorrectAnswer(n) }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部信息 -->
    <BaseFooter />
  </div>
</template>

<script>
import BaseHeader from '@/components/baseHeader.vue';
import BaseFooter from '@/components/baseFooter.vue';
export default {
  name: "QuestionPractice",
  components: { BaseHeader, BaseFooter },
  data() {
    return {
        filterType:"正确",
         correct : [1,2,3,5,6,9,10,11,13],
         wrong : [4,8,12],
         undone :[7],
          navs: ["首页", "新闻", "题库", "资料", "产教课程"],
        activeNav: "产教课程",
        navOpen: false,
        isHovered: false,
        totalScore: 89,
    }
  },
   mounted() {
    window.addEventListener("resize", this.handleResize);
    this.handleResize();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleResize() {
      if (window.innerWidth > 900) {
        this.navOpen = false;
      }
    },
     goBuy() {
      // 跳转购买页面逻辑
      this.showDialog = false;
      // 例如：this.$router.push('/buy');
    },
    getDotClass(n) {
        if (this.correct.includes(n)) return 'dot-correct'
        if (this.wrong.includes(n)) return 'dot-wrong'
        if (this.undone.includes(n)) return 'dot-undone'
        return ''
    },
    getQuestionStatus(n) {
      if (this.correct.includes(n)) return '正确'
      if (this.wrong.includes(n)) return '错误'
      return '未做'
    },
    getStatusClass(n) {
      if (this.correct.includes(n)) return 'status-correct'
      if (this.wrong.includes(n)) return 'status-wrong'
      return 'status-undone'
    },
    scrollToQuestion(n) {
      const element = document.getElementById(`question-${n}`);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    },
    isQuestionVisible(n) {
      if (this.filterType === '正确') return this.correct.includes(n)
      if (this.filterType === '错误') return this.wrong.includes(n)
      if (this.filterType === '未做') return this.undone.includes(n)
      return true
    },
    filterQuestions() {
      // 触发重新渲染
      this.$forceUpdate();
    },
    getAnswer(n) {
      // 模拟获取答案
      return `答案 ${n}`
    },
    getCorrectAnswer(n) {
      // 模拟获取正确答案
      return `正确答案 ${n}`
    }
  }
}
</script>

<style scoped lang="scss">
.jiaojuan-page {
  min-height: 100vh;
  background:#FFFFFF;
  display: flex;
  flex-direction: column;
  position:relative;
}
.bg_top{
  background:linear-gradient( 180deg, #F6F4FE 0%, #FFFFFF 100%);
  width:100%;
  height:80px;
  position:absolute;
  top: 60px;


}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px 0 40px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}
.header-left {
  display: flex;
  align-items: center;
}
.logo-dot {
  width: 16px;
  height: 16px;
  background: #d8d8d8;
  border-radius: 50%;
  margin-right: 8px;
}
.platform-name {
  font-weight: bold;
  margin-right: 32px;
}
.nav-menu span {
  margin-right: 24px;
  cursor: pointer;
  color: #333;
}
.header-right {
  display: flex;
  align-items: center;
}
.breadcrumb {
  margin: 24px 0 0 60px;
  position:absolute;
  top: 80px;
  z-index:1;
}
 .last,.el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
     color:#3575f6 !important;
  }
.score-card {
  width: 900px;
  margin: 94px auto 30px auto;
  padding: 32px 0 24px 0;
  border-radius: 16px;
  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.04);
  transition: all 0.3s ease;
  
  &.score-card-hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px 0 rgba(0,0,0,0.08);
  }
}
.score-main {
  text-align: center;
  margin-bottom: 64px;
}
.score-value {
  font-size: 56px;
  color: #3575f6;
  font-weight: bold;
}
.score-label {
  color: #888;
  font-size: 16px;
}
.score-stats {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-bottom: 44px;
  border-bottom:1px solid #bdbdbd;
  padding-bottom:20px;
}
.stat-value {
  font-size: 24px;
  color: #222;
  text-align: center;
}
.stat-label {
  color: #888;
  font-size: 14px;
  text-align: center;
}
.score-questions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 24px;
  margin-bottom: 24px;
}
.question-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease;
  
  &:hover {
    transform: scale(1.1);
  }
}
.dot-correct {
  background: #4caf50;
}
.dot-wrong {
  background: #f44336;
}
.dot-undone {
  background: #bdbdbd;
}
.score-filter {
  display: flex;
  justify-content: flex-end;
  margin-right: 40px;
  margin-top:50px;
}
.footer {
  background: #5687f7;
  color: #fff;
  margin-top: 60px;
  padding-top: 40px;
  padding-bottom: 16px;
}
.footer-content {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-bottom: 24px;
}
.footer-col {
  min-width: 120px;
}
.footer-title {
  font-weight: bold;
  margin-bottom: 12px;
}
.footer-link {
  margin-bottom: 8px;
  font-size: 14px;
}
.footer-btn {
  margin-top: 8px;
}
.footer-qrcode {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.qrcode-box {
  width: 80px;
  height: 80px;
  background: #e0e0e0;
  border-radius: 8px;
  margin-bottom: 8px;
}
.footer-bottom {
  text-align: center;
  color: #dbe6ff;
  font-size: 13px;
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 32px;
}
.questions-container {
  width: 900px;
  margin: 0 auto 40px;
}
.question-item {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.04);
  transition: all 0.3s ease;
  
  &.hidden {
    display: none;
  }
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px 0 rgba(0,0,0,0.08);
  }
}
.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.question-number {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.question-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 14px;
  
  &.status-correct {
    background: #e8f5e9;
    color: #4caf50;
  }
  
  &.status-wrong {
    background: #ffebee;
    color: #f44336;
  }
  
  &.status-undone {
    background: #f5f5f5;
    color: #9e9e9e;
  }
}
.question-content {
  color: #666;
  line-height: 1.6;
}
.answer-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}
.correct-answer {
  color: #f44336;
  margin-top: 8px;
}
</style>
